<template>
	<div id="Index">
		<van-nav-bar placeholder title="达达外卖" fixed>
			<template #left>
				<van-icon @click="selectArea" name="location-o" size="1.5em" color="#fff" />
			</template>
			<template #right v-if="!token">
				<div @click="goLogin">登录|注册</div>
			</template>
		</van-nav-bar>
		<!-- 轮播食品分类 -->
		<van-swipe class="categorys" indicator-color="#3FC46D">
			<van-swipe-item class="categorys" v-for="(categorys,index) in categoryArr" :key="index">
				<div class="category-item" v-for="category in categorys" :key="category.id">
					<img :src="category.iconUrl" >
					<div class="title">{{category.name}}</div>
				</div>
			</van-swipe-item>
		</van-swipe>
		<!-- 热门商家列表 -->
		<div class="HotshopList">
			<div class="head">
				<van-icon name="fire-o" color="#f00" size="1.2em" />
				<div class="title">热门商家列表</div>
			</div>
			<!-- 一个商家 -->
			<Shop v-for="shop in shopList" :shop="shop" :key="shop.id" />
		</div>
		<!-- 返回顶部 -->
		<div class="backtop" @click="globalFun.backtop">
			<img src="@/assets/icon/backtop.png">
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex'
import Shop from '../../components/Shop.vue'
	export default {
    methods: {
        goLogin() {
            this.$router.push("/ULogin");
        },
		selectArea(){
			this.$router.push("/selectArea")
		}
    },
    computed: {
        ...mapState(["categories","shopList","token"]),
        categoryArr() {
            const { categories } = this;
            const arr = []
            let minArr = []
            categories.forEach(valMap => {
                minArr.push(valMap)
                if (minArr.length == 8) {
                    arr.push(minArr)
                    minArr = []
                }
            });
            return arr
        }
    },
    components: { Shop }
}
</script>

<style lang="scss" scoped>
@import "../../scss/GLOBAL.scss";
#Index {
	height: 100%;
	user-select: none;
	::v-deep {
		.van-nav-bar {
			color: #fff;
			background-color: $themeColor;
		}
		.van-nav-bar__title {
			color: #fff;
		}
		.van-swipe__indicators {
			bottom: 2px;
		}
	}
	.category-item {
		width: 25%;
		height: 100%;
		text-align: center;
		img {
			width: 3.75em;
		}
		.title {
			font-size: .9em;
			text-align:center;
		}
	}
	.categorys {
		display: flex;
		flex-wrap: wrap;
	}
	.HotshopList {
		padding: 0 .8em;
		.head {
			padding: .8em 0;
			display: flex;
			align-items: center;
			.title {
				color: #f00;
				padding: 0 .5em;
			}
		}
		
	}
}
</style>